<template>
    <div class="max">
        <el-card class="box-card height">
        <div class="demo-type" v-show="show == 0" v-loading="loading">
            <div class="box">
                <el-avatar :size="50" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" />
            </div>
            <div class="form">
                <el-form label-position="right">
                    <el-form-item label="用户名：">
                        <el-input label="username" v-model="form.username" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="手　机：">
                        <el-input label="phone" v-model="form.phone" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="邮　箱：">
                        <el-input label="email" v-model="form.email" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="昵　称：">
                        <el-input label="nickname" v-model="form.nickname" disabled></el-input>
                    </el-form-item>
                </el-form>
                <div class="time">登录时间：<span class="timer">{{ formatDate(login_time) }}</span></div>
                <div class="buttons">
                    <el-button type="primary" @click="editInfo" :icon="Edit">修改信息</el-button>
                    <el-button type="primary" @click="editPassword" :icon="Edit">修改密码</el-button>
                </div>
            </div>
        </div>
        <div class="demo-type" v-show="show == 1" v-loading="loading">
            
            <div class="form">
                <el-form :model="form" label-position="right">
                    <el-form-item label="用户名：">
                        <el-input label="username" v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="手　机：">
                        <el-input label="phone" v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮　箱：">
                        <el-input label="email" v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item label="昵　称：">
                        <el-input label="nickname" v-model="form.nickname"></el-input>
                    </el-form-item>
                </el-form>
                <div class="buttons">
                    <el-button type="primary" @click="close">取消</el-button>
                    <el-button type="primary" @click="save">保存</el-button>
                </div>
            </div>
        </div>
        <div class="demo-type" v-show="show == 2" v-loading="loading">
            
            <div class="form">
                <el-form-item label="旧密码：">
                    <el-input type="password" v-model="password.old" :show-password="true" placeholder="请输入旧密码" />
                </el-form-item>
                <el-form-item label="新密码：">
                    <el-input type="password" v-model="password.new" placeholder="请输入新密码" />
                </el-form-item>
                <div class="buttons">
                    <el-button type="primary" @click="close">取消修改</el-button>
                    <el-button type="primary" @click="savepass">确认密码</el-button>
                </div>
            </div>
        </div>
         </el-card>
        <el-card class="box-cardinfo height">qwqw</el-card>
    </div>
</template>

<script lang="ts" setup>
import { useUserInfoStore } from '@/stores/userInfo'
import { Edit } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { nextTick, ref, watch, onMounted, reactive } from 'vue'
import { reqUserInfo, reqEditUserInfo,reqEditPwd } from "@/api/user";
import { ElMessage } from 'element-plus';
const passwordType = ref('password')
const passwordRef = ref<HTMLInputElement>()
const userInfoStore = useUserInfoStore()
const loading = ref<any>(true)
const form = ref<any>({
    admin_user_id: '',
    username: '',
    nickname: '',
    phone: '',
    email: '',
    login_time: ''
})
const password = reactive<any>({
    old:'',
    new:''
})
const login_time = ref<any>('')
const show = ref<any>(0)
onMounted(() => {
    // const admin_user_id = userInfoStore.admin_user_id
    getInfo()
})
const formatDate=(timestamp:any)=> {
      return dayjs.unix(timestamp).format('YYYY-MM-DD HH:mm:ss')
    }
const showPwd = () => {
    if (passwordType.value === 'password') {
        passwordType.value = 'text'
    } else {
        passwordType.value = 'password'
    }
    nextTick(() => {
        passwordRef.value?.focus()
    })
}
const getInfo = () => {
    loading.value = true
    reqUserInfo().then((result) => {
        login_time.value =  result.login_time
        form.value = { ...result }
        loading.value = false
    })


}
const editInfo = () => {
    loading.value = true
    show.value = 1
    loading.value = false
    getInfo()
}

const close = () => {
    loading.value = true
    show.value = 0
    loading.value = false
    getInfo()
}
const save = () => {
    loading.value = true
    console.log(form.value);

    reqEditUserInfo(
        form.value.username,
        form.value.nickname,
        form.value.phone,
        form.value.email
    ).then(() => {
        ElMessage.success('修改成功!')
    })
    loading.value = false
    show.value = 0
    getInfo()
}
const editPassword = () => {
    loading.value = true
    show.value = 2
    password.old = ''
    password.new = ''
    loading.value = false
}
const savepass = ()=>{
    reqEditPwd(password.old,password.new).then(()=>{
        ElMessage.success('修改成功!')
        show.value = 0
        getInfo()
    }).catch((error)=>{
        ElMessage.error('修改失败!')
    })
}
</script>

<style lang="scss" scoped>
.max{
    display: flex;
    .height{
        height: 415px
    }
    .box-card {
        border-top: 20px solid lightgrey;
        width: 450px;
        display: flex;
        justify-content: center;
        margin-right: 20px;
        .box {
            display: flex;
            justify-content: center
        }
    
        .form {
            margin-top: 20px;
    
            .buttons {
                display: flex;
                justify-content: space-between;
            }
    
            .time {
                color: lightblue;
                font-size: 15px;
                margin-bottom: 20px;
    
                .timer {
                    color: rgb(58, 37, 153)
                }
            }
        }
    }
    .box-cardinfo{
        border-top: 20px solid lightgrey;
    }
}
</style>
